<template>
    <div class="login-wrap">
        <dv-loading v-if="dvLoading" class="loading-class">登陆中...</dv-loading>
        <div class="five-star-class">
            <div class="social_class1">
            </div>
            <div class="social_class2">
            </div>
            <div class="social_class3">
            </div>
            <div class="social_class4">
            </div>
            <div class="social_class5">
            </div>
        </div>
        <canvas class="number_canvas" id="q" width="1440" height="900"></canvas>
        <div class="ms-login">
            <!-- <div class="ms-title">
                <div style="margin-top:0.3rem;"><img src="../../assets/img/police.png" width="35" height="35"></div>
                <img src="../../assets/img/login/.png">
                <div style="margin-left:0.5rem;">务工人员后台管理系统</div>
            </div> -->
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="ms-content">
                <el-form-item prop="username">
                    <el-input v-model="ruleForm.username" class="login-username" placeholder="请输入用户名">
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input class="login-username" placeholder="请输入密码" v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')" show-password>
                    </el-input>
                </el-form-item>
                <el-form-item style="margin-left:240px;margin-top:-10px;">
                    <el-checkbox class="remeber-password" size="mini" v-model="ruleForm.checked">记住密码</el-checkbox>
                </el-form-item>
                <div class="login-btn">
                    <el-button round type="primary" @click="submitForm('ruleForm')">登 录</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
import $ from 'jquery';
    export default {
        data(){
            return {
                dvLoading:false,
                ruleForm: {
                    username: '',
                    password: '',
                    checked:false
                },
                rules: {
                    username: [
                        { required: true, message: '请输入用户名', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ]
                },
                inter:''
            }
        },
        created(){
            // 获取用户信息
            this.initUser();
        },
        mounted(){
            // this.RunMatrix();
        },
        methods: {
            RunMatrix() {
                let self = this;
               setInterval(()=>{
                   self.draw()
               },1000)
            },
            draw(){
                let s = window.screen;
                let width = q.width = s.width;
                let height = q.height;
                let yPositions = Array(300).join(0).split('');
                let ctx = q.getContext('2d');
                let text = '3';
                let x = '';
                // ctx.fillStyle = 'rgba(20,111,193,0.5)';
                ctx.fillRect(0, 0, width, height);
                ctx.fillStyle = '#4caaff';/*代码颜色*/
                ctx.font = '10pt Georgia';
                yPositions.map(function(y, index) {
                    //  text = String.fromCharCode(1e2 + Math.random() * 330);
                        text = '3';
                        console.log('text:----',text);
                        x = (index * 10) + 30;
                        q.getContext('2d').fillText(text, x, y);
                        if (y > Math.random() * 1e4) {
                            yPositions[index] = 0;
                        } else {
                            yPositions[index] = y + 30;
                        }
                });
            },
            // 获取用户信息
            initUser(){
                let userInfomation = localStorage.getItem('userInfomation');
                if(userInfomation && userInfomation.length){
                    this.ruleForm.username = JSON.parse(userInfomation).username;
                    this.ruleForm.password = JSON.parse(userInfomation).password;
                }
            },
            // 点击登录
            submitForm(formName) {
                let self = this;
                self.dvLoading = true;
                self.$refs[formName].validate((valid) => {
                    if (valid) {
                        let formData = new FormData()
                        formData.append('username', self.ruleForm.username)
                        formData.append('password', self.ruleForm.password)
                        $.ajax({
                            type:"POST",                            
                            url:"/wgry/index/login",
                            data: formData,
                            timeout:60000,
                            async: true,
                            cache: false,
                            contentType: false,
                            processData: false,
                            success: function (res) {
                                if(res.code == '20000'){
                                    localStorage.setItem('ms_username',res.data.nickName);
                                    localStorage.setItem('userinfo',JSON.stringify(res.data));
                                    if(self.ruleForm.checked){
                                        localStorage.setItem('userInfomation',JSON.stringify(self.ruleForm));
                                    }
                                    localStorage.setItem('userId',res.data.id);
                                    localStorage.setItem('token',res.data.token);
                                    self.$router.push('/dashboard');
                                    self.$message.success(res.message)
                                }else{
                                    self.$message.error(res.message)
                                    self.dvLoading = false;
                                }
                            },
                            error:function(err){
                                self.dvLoading = false;
                                self.$message.error('网络连接中断')
                            },complete:function (XMLHttpRequest,status) {
                                if(status == 'timeout'){
                                    self.dvLoading = false;
                                    self.$message.error('请求超时，请联系管理员！')
                                }
                                
                            }
                        })
                    } else {
                        self.dvLoading = false;
                        return false;
                    }
                });
            },
        }
    }
</script>

<style scoped>
    .number_canvas{
        position:fixed;
        left:0; 
        top:0px;
        width:100%;
        height:100%;
        z-index: 100;
        opacity: 0.4;
    }
    .login-wrap{
        position: absolute;
        width:100%;
        height:100%;
        background-image: url(../../assets/img/login/login_bg.png);
        background-size: 100%;
        background-repeat:no-repeat;
        background-size: cover;
    }
    .ms-title{
        width:100%;
        line-height: 50px;
        text-align: center;
        font-size:20px;
        color: white;
        font-weight: bold;
        font-family: cursive;
        display: flex;
        margin-left: 2rem;
    }
    .social_class1{
        position: absolute;
        top: 190px;
        left: 195px;
        background-image: url(../../assets/img/login/xz_box1.png);
        background-size: 100%;
        background-repeat:no-repeat;
        background-size: cover;
        width: 80px;
        height: 80px;
        z-index: 150;
        animation:carton1 10s infinite;
    }
    @keyframes carton1{
        0%{
            transform: scale(0);
            top: 190px;
            left: 195px;
        }
        40%{
            transform: scale(1);
            top: 190px;
            left: 195px;
        }
        50%{
            top: 190px;
            left: 315px;
        }
        60%{
            top: 300px;
            left: 355px;
        }
        70%{
            top: 370px;
            left: 258px;
        }
        80%{
            top: 300px;
            left: 165px;
        }
        90%{
            transform: scale(1);
            top: 190px;
            left: 195px;
        }
        100%{
            transform: scale(0);
            top: 190px;
            left: 195px;
        }
    }
    .social_class2{
        position: absolute;
        top: 190px;
        left: 315px;
        background-image: url(../../assets/img/login/xz_box2.png);
        background-size: 100%;
        background-repeat:no-repeat;
        background-size: cover;
        width: 80px;
        height: 80px;
        z-index: 150;
        animation:carton2 10s infinite;
    }
    @keyframes carton2{
        0%{
            transform: scale(0);
            top: 190px;
            left: 315px;
        }
        40%{
            transform: scale(1);
            top: 190px;
            left: 315px;
        }
        50%{
            top: 300px;
            left: 355px;
        }
        60%{
            top: 370px;
            left: 258px;
        }
        70%{
            top: 300px;
            left: 165px;
        }
        80%{
            top: 190px;
            left: 195px;
        }
        90%{
            transform: scale(1);
            top: 190px;
            left: 315px;
        }
        100%{
            transform: scale(0);
            top: 190px;
            left: 315px;
        }
    }
    .social_class3{
        position: absolute;
        top: 300px;
        left: 355px;
        background-image: url(../../assets/img/login/xz_box3.png);
        background-size: 100%;
        background-repeat:no-repeat;
        background-size: cover;
        width: 80px;
        height: 80px;
        animation:carton3 10s infinite;
        z-index: 150;
    }
    @keyframes carton3{
        0%{
            transform: scale(0);
            top: 300px;
            left: 355px;
        }
        40%{
            transform: scale(1);
            top: 300px;
            left: 355px;
        }
        50%{
            top: 370px;
            left: 258px;
        }
        60%{
            top: 300px;
            left: 165px;
        }
        70%{
            top: 190px;
            left: 195px;
        }
        80%{
            top: 190px;
            left: 315px;
        }
        90%{
            transform: scale(1);
            top: 300px;
            left: 355px;
        }
        100%{
            transform: scale(0);
            top: 300px;
            left: 355px;
        }
    }
    .social_class4{
        position: absolute;
        top: 300px;
        left: 165px;
        background-image: url(../../assets/img/login/xz_box4.png);
        background-size: 100%;
        background-repeat:no-repeat;
        background-size: cover;
        width: 80px;
        height: 80px;
        animation:carton4 10s infinite;
        z-index: 150;
    }
     @keyframes carton4{
        0%{
            transform: scale(0);
            top: 300px;
            left: 165px;
        }
        40%{
            transform: scale(1);
            top: 300px;
            left: 165px;
        }
        50%{
            top: 190px;
            left: 195px;
        }
        60%{
            top: 190px;
            left: 315px;
        }
        70%{
            top: 300px;
            left: 355px;
        }
        80%{
            top: 370px;
            left: 258px;
        }
        90%{
            transform: scale(1);
            top: 300px;
            left: 165px;
        }
        100%{
            transform: scale(0);
            top: 300px;
            left: 165px;
        }
    }
    .social_class5{
        position: absolute;
        top: 370px;
        left: 258px;
        background-image: url(../../assets/img/login/xz_box5.png);
        background-size: 100%;
        background-repeat:no-repeat;
        background-size: cover;
        animation:carton5 10s infinite;
        width: 80px;
        height: 80px;
        z-index: 150;
    }
    @keyframes carton5{
        0%{
            transform: scale(0);
            top: 370px;
            left: 258px;
        }
        40%{
            transform: scale(1);
            top: 370px;
            left: 258px;
        }
        50%{
            top: 300px;
            left: 165px;
        }
        60%{
            top: 190px;
            left: 195px;
        }
        70%{
            top: 190px;
            left: 315px;
        }
        80%{
            top: 300px;
            left: 355px;
        }
        90%{
            transform: scale(1);
            top: 370px;
            left: 258px;
        }
        100%{
            transform: scale(0);
            top: 370px;
            left: 258px;
        }
    }
    .five-star-class{
        position: absolute;
        top: 10%;
        left: 8%;
        width: 580px;
        height: 550px;
        background-image: url(../../assets/img/login/login_l.png);
        background-size: 100%;
        background-repeat:no-repeat;
        background-size: cover;
        z-index: 120;
    }
    .ms-login{
        position: absolute;
        top:20%;
        right: 15%;
        width: 400px;
        height: 450px;
        background-image: url(../../assets/img/login/login_r.png);
        background-size: 100%;
        background-repeat:no-repeat;
        background-size: cover;
        z-index: 100;
    }
    .ms-content{
        padding: 10px 30px;
        margin-left: 20px;
        margin-top: 150px;
    }
    .login-btn{
        text-align: center;
        margin-top: -10px;
    }
    .login-btn button{
        width:100%;
        height:36px;
        margin-bottom: 10px;
        background: #ffa118;
        border-color: #ffa118;
    }
    .login-btn button:hover,.login-btn button:focus{
        background: #e28907;
        border-color: #e28907;
    }
    .login-username >>> .el-input__inner{
        background: #1d56b4;
        border-radius: 20px;
        border-color:  #1d56b4;
        color: white;
    }
    .remeber-password >>> .el-checkbox__label{
        font-size: 12px;
    }
    .loading-class{
        background:rgba(0, 0, 0, 0.8);
        color:#009688;
        width:100%;
        height:100vh;
        z-index:300;
        position:absolute;
        left:0px;
        top:1px;
    }
</style>